<template>
  <el-form
    :model="form"
    label-width="90px"
    :show-message="false"
    :inline="true"
    ref="form"
    :rules="rules"
  >
    <el-row>
      <el-col :span="8">
        <el-form-item label="收款单号:">
          <span>{{form.code}}</span>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="收款对象:" prop="receiptObjects">
          <el-input
            v-model="form.receiptObjects"
            clearable
            placeholder="请输入"
          ></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="挂账对象:" prop="buyCreditObjects">
          <el-input
            v-model="form.buyCreditObjects"
            clearable
            placeholder="请输入"
          ></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="业务单号:" >
          <span>{{form.businessCode}}</span>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="业务类型:" >
          <span>{{form.businessType}}</span>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="预收款:" >
          <span>{{form.advancesReceived}}</span>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="应收金额:" >
          <span>{{form.amount}}</span>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="已收金额:" >
          <span>{{form.receivedAmount}}</span>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="应收余额:" >
          <span>{{form.amount - form.receivedAmount}}</span>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="24">
        <el-row>
          <el-col :span="24" align="right">
            <el-button type="primary" @click="addLineDomainListItem">新增</el-button>
          </el-col>
        </el-row>
        <el-divider content-position="center"></el-divider>
      </el-col>
      <el-col :span="24">
        <el-table :data="form.lineDomainList">
          <el-table-column label="收款描述" align="center" prop="description" >
            <template slot-scope="scope">
              <el-input v-model.trim="scope.row.description"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="收款项目" align="center" prop="item">
            <template slot-scope="scope">
              <el-select
                clearable
                v-model="scope.row.item"
                placeholder="收款项目"
              >
                <el-option
                  v-for="item in itemTypeOptions"
                  :key="item.value"
                  :value="item.value"
                  :label="item.label"
                />
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="收款方式" align="center" prop="name" >
            <template slot-scope="scope">
              <el-select
                clearable
                v-model="scope.row.receiptType"
                placeholder="收款方式"
              >
                <el-option
                  v-for="item in receiptTypeOtions"
                  :key="item.value"
                  :value="item.value" 
                  :label="item.label"
                />
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="银行" align="center" prop="bank" >
            <template slot-scope="scope">
              <el-input v-model.trim="scope.row.bank"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="银行流水号" align="center" prop="seqNumber" >
            <template slot-scope="scope">
              <el-input v-model.trim="scope.row.seqNumber"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="本次收款" align="center" prop="amount" >
            <template slot-scope="scope">
              <el-input v-model.number="scope.row.amount"></el-input>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            align="center"
            class-name="small-padding fixed-width"
          >
            <template slot-scope="scope">
              <el-button  size="mini" @click="deleteLineDomainListItem(scope.$index)">-</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <el-row style="margin-top: 24px">
      <el-col :span="12"  align="center">
        <div>收款人：<span>{{form.receiptPerson}}</span></div>
      </el-col>
      <el-col :span="12"  align="center">
        <div>收款时间：<span>{{form.receiptDate}}</span></div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24" align="right">
        <el-form-item>
          <el-button type="primary" @click="onSubmit">收款</el-button>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>
<script>
import { getDict } from '@/utils/index'
import {
  addReceiptRecord,
} from '@/api/financial/index'
export default {
  name: 'DialogDataForm',
  props: {
    dialogData: {
      type: Object,
      default: () => { },
    }
  },
  data () {
    return {
      form: {
        buyCreditObjects: '',
        receiptObjects: '',
        lineDomainList: [{
          amount:null,
          bank:'',
          description: '',
          item: '',
          receiptType: '',
          seqNumber: '',
        }]
      },
      receiptTypeOtions: [
        {label: '现金', value: 'CASH'},
        {label: 'POS', value: 'POS'},
        {label: '转账', value: 'TRANSFER'},
        {label: '挂账', value: 'BUYER_CREDIT'},
        {label: '预收冲账', value: 'STRIKE_BALANCE'},
      ],
      itemTypeOptions: [
        {label: '维修款', value: 'MAINTAIN'},
        {label: '预收款', value: 'RECEIVABLE'},
        {label: '延保款', value: 'EXTEND_WARRANTY'},
        {label: '整车首付', value: 'DOWN_PAYMENT'},
        {label: '整车尾款', value: 'BALANCE_PAYMENT'},
        {label: '新车贷款', value: 'NEW_CAR_LOAN'},
        {label: '内部挂账', value: 'PAYMENT_INTERNAL'},
        {label: '其他业务收入', value: 'OTHER'},
        {label: '续保保证金', value: 'RENEWAL_BOND'},
        {label: '精品款', value: 'BOUTIQUE'},
        {label: '新车保费', value: 'NEW_INSURANCE'},
        {label: '续保保费', value: 'RENEWAL_PREMIUM'},
        {label: '调拨收款', value: 'ALLOCATE_CREDIT'},
      ],
      rules: {
        receiptObjects: [{
          required: true,
          message: '请输入',
          trigger: 'change'
        },],
        buyCreditObjects: [{
          required: true,
          message: '请输入',
          trigger: 'blur',
        }],
      },
    }
  },
  created () {
    this.form = Object.assign(this.form, this.dialogData);
    // this.receiptTypeOtions = getDict(['支付方式']);
  },
  methods: {
    //新增单项
    addLineDomainListItem() {
      this.form.lineDomainList.push({
        amount:null,
        bank:'',
        description: '',
        item: '',
        receiptType: '',
        seqNumber: '',
      });
    },
    //删除单项
    deleteLineDomainListItem(index) {
      this.form.lineDomainList.splice(index,1)
    },
    onSubmit () {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.form.receiptDueId = this.form.id;
          delete this.form.id;
          addReceiptRecord(this.form).then(response => {
            if (response.success) {
              this.$message.success("操作成功");
              this.$emit("close", true);
            }
          })
        } else {
          return false
        }
      })
    }
  },
  
}

</script>
<style lang="scss" scoped>
</style>
